<template>
  <div
    class="box-border"
    style="height:100%;padding:5px 5px; position: relative;"
  >
    <p class="plan-tit">试验计划表</p>
    <a-calendar @panelChange="onPanelChange">
      <template slot="dateCellRender" slot-scope="value" class="events">
        <!-- <div v-if="value"> -->
        <div v-for="(item, index) in getListData(value)" :key="index">
          <div class="text" style="-webkit-line-clamp: 3">
            {{ item.content }}
          </div>
        </div>
        <!-- </div> -->
      </template>
      <template slot="monthCellRender" slot-scope="value">
        <div v-if="getMonthData(value)" class="notes-month">
          <section>{{ getMonthData(value) }}</section>
          <span>Backlog number</span>
        </div>
      </template>
    </a-calendar>
  </div>
</template>

<script>
import { sysQuery } from '../../api/dataApi'
import { EventBus } from '../../../utils/eventBus.js'
import moment from 'moment'
export default {
  data() {
    return {
      rlList: {},
      month: moment().month(),
    }
  },

  props: {
    eqname: {
      type: String,
      default: '',
    },
  },
  watch: {
    // 月份切换调用
    eqname(val) {
      if (val) {
        this.getData(val)
      }
    },
  },
  methods: {
    onPanelChange(val) {
      let month = moment(val).month()
      this.month = month
      this.getData(this.eqname)
    },

    getData(val) {
      const that = this
      const header = {}
      header['report.tableid'] = 'bne_chart_plan'
      // header['report.tableid'] = 'main@d_trial_plan'
      header['dvname'] = val
      header['plan_month'] = String(this.month + 1)
      // header['@plan_month'] = 'like_anywhere'
      const params = {
        // '@params': JSON.stringify(header),
        _params: JSON.stringify(header),
        _conditions: JSON.stringify({
          plan_month: 'like_anywhere',
        }),
        // pageSize: 20,
        pageIndex: -1,
        sortField: '',
        sortOrder: '',
      }
      sysQuery(params)
        .then((res) => {
          that.rlList = res.data && res.data.length ? res.data[0] : null
          const name = res.data && res.data.length ? res.data[0]['psname'] : '-'
          EventBus.$emit('setPerson', name)
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员-计划！')
        })
    },
    getListData(value) {
      let listData
      switch (value.date()) {
        case 1:
          listData = [{ content: this.rlList ? this.rlList.d1 : '' }]
          break
        case 2:
          listData = [{ content: this.rlList ? this.rlList.d2 : '' }]
          break
        case 3:
          listData = [{ content: this.rlList ? this.rlList.d3 : '' }]
          break
        case 4:
          listData = [{ content: this.rlList ? this.rlList.d4 : '' }]
          break
        case 5:
          listData = [{ content: this.rlList ? this.rlList.d5 : '' }]
          break
        case 6:
          listData = [{ content: this.rlList ? this.rlList.d6 : '' }]
          break
        case 7:
          listData = [{ content: this.rlList ? this.rlList.d7 : '' }]
          break
        case 8:
          listData = [{ content: this.rlList ? this.rlList.d8 : '' }]
          break
        case 9:
          listData = [{ content: this.rlList ? this.rlList.d9 : '' }]
          break
        case 10:
          listData = [{ content: this.rlList ? this.rlList.d10 : '' }]
          break
        case 11:
          listData = [{ content: this.rlList ? this.rlList.d11 : '' }]
          break
        case 12:
          listData = [{ content: this.rlList ? this.rlList.d12 : '' }]
          break
        case 13:
          listData = [{ content: this.rlList ? this.rlList.d13 : '' }]
          break
        case 14:
          listData = [{ content: this.rlList ? this.rlList.d14 : '' }]
          break
        case 15:
          listData = [{ content: this.rlList ? this.rlList.d15 : '' }]
          break
        case 16:
          listData = [{ content: this.rlList ? this.rlList.d16 : '' }]
          break
        case 17:
          listData = [{ content: this.rlList ? this.rlList.d17 : '' }]
          break
        case 18:
          listData = [{ content: this.rlList ? this.rlList.d18 : '' }]
          break
        case 19:
          listData = [{ content: this.rlList ? this.rlList.d19 : '' }]
          break
        case 20:
          listData = [{ content: this.rlList ? this.rlList.d20 : '' }]
          break
        case 21:
          listData = [{ content: this.rlList ? this.rlList.d21 : '' }]
          break
        case 22:
          listData = [{ content: this.rlList ? this.rlList.d22 : '' }]
          break
        case 23:
          listData = [{ content: this.rlList ? this.rlList.d23 : '' }]
          break
        case 24:
          listData = [{ content: this.rlList ? this.rlList.d24 : '' }]
          break
        case 25:
          listData = [{ content: this.rlList ? this.rlList.d25 : '' }]
          break
        case 26:
          listData = [{ content: this.rlList ? this.rlList.d26 : '' }]
          break
        case 27:
          listData = [{ content: this.rlList ? this.rlList.d27 : '' }]
          break
        case 28:
          listData = [{ content: this.rlList ? this.rlList.d28 : '' }]
          break
        case 29:
          listData = [{ content: this.rlList ? this.rlList.d29 : '' }]
          break
        case 30:
          listData = [{ content: this.rlList ? this.rlList.d30 : '' }]
          break
        case 31:
          listData = [{ content: this.rlList ? this.rlList.d31 : '' }]
          break
        default:
      }
      return listData || []
    },
    getMonthData(value) {
      if (value.month() === 8) {
        return 1394
      }
    },
  },
}
</script>

<style lang="less" scoped>
.plan-tit {
  position: absolute;
  left: 15px;
  top: 10px;
  z-index: 100;
  .px2font(17);
  letter-spacing: 2px;
  color: #fff;
}
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
</style>
